$(function () {
    /**
     *功能描述: 鼠标点击隐藏元素和显示元素
     *@author ZYH
     *@since 2021/7/1 17:04
     */
    $(".button1").click(function () {
        //p标签元素消失
        // $("p").hide();
        // $("#test1").hide();
        $("p").hide();
        // 选取元素后点击次元素后消
        // $(this).hide();
        // 显示元素
        // $(".p3").show();
    });
    $(".button2").click(function () {
        $("p").show();
    });

    $(".button3").click(function () {
        $("p").toggle();
    });
    /**
     *功能描述: 鼠标
     *@author ZYH
     *@since 2021/7/1 16:48
     */
    $(".p1").mouseenter(function () {
        alert('鼠标移动');
    });
    /**
     *功能描述: 鼠标悬停
     *@author ZYH
     *@since 2021/7/1 16:49
     */
    $(".p2").hover(
        function () {
            alert("你进入了 p1!");
        },
        function () {
            alert("拜拜! 现在你离开了 p1!");
        }
    );
    /**
     *功能描述: 鼠标离开
     *@author ZYH
     *@since 2021/7/1 16:48
     */
    $(".p3").mouseleave(function () {
        alert('鼠标离开');
    });

    /**
     *功能描述: 鼠标获取焦点
     *@author ZYH
     *@since 2021/7/1 16:49
     */
    $("input").focus(function () {
        $(this).css("background-color", "#cccccc");
    });
    /**
     *功能描述:鼠标失去焦点
     *@author ZYH
     *@since 2021/7/1 16:50
     */
    $("input").blur(function () {
        $(this).css("background-color", "#ffffff");
    });
    /**
     *功能描述: 点击按钮淡入
     *@author ZYH
     *@since 2021/7/1 17:54
     */
    $(".button4").click(function () {
        $(".p4").fadeIn();
        $(".p5").fadeIn("slow");
        $(".p6").fadeIn(3000);
    });
    /**
     *功能描述:鼠标按钮淡出
     *@author ZYH
     *@since 2021/7/1 17:58
     */
    $(".button5").click(function () {
        $(".p1").fadeOut();
        $(".p2").fadeOut("slow");
        $(".p3").fadeOut(3000);
    });
    /**
     *功能描述: 鼠标点击淡入淡出
     *@author ZYH
     *@since 2021/7/1 18:00
     */
    $(".button6").click(function () {
        $(".p1").fadeToggle();
        $(".p2").fadeToggle("slow");
        $(".p3").fadeToggle(3000);
    });
    /**
     *功能描述:滑出模块
     *@author ZYH
     *@since 2021/7/2 8:51
     */
    $("#flip").click(function () {
        $("#panel").slideDown("slow");
    });
    /**
     *功能描述: 滑入模块
     *@author ZYH
     *@since 2021/7/2 8:53
     */
    $("#flip1").click(function () {
        $("#panel1").slideUp("slow");
    });

    /**
     *功能描述: 滑入滑出
     *@author ZYH
     *@since 2021/7/2 8:53
     */
    $("#flip2").click(function () {
        $("#panel2").slideToggle("slow");
    });

    /**
     *功能描述: 点击按钮左滑
     *@author ZYH
     *@since 2021/7/2 9:16
     */
    $(".button7").click(function () {
        $(".button7-div").animate({
            left: "2rem"
        });
    });

    /**
     *功能描述:鼠标点击滑动放大
     *@author ZYH
     *@since 2021/7/2 9:21
     */
    $(".button8").click(function () {
        $(".button8-div").animate({
            left: '3rem',
            //淡化颜色的百分比
            opacity: '0.5',
            height: '3rem',
            width: '3rem'
        });
    });
    /**
     *功能描述:
     *@author ZYH
     *@since 2021/7/2 9:51
     */
    $(".button9").click(function () {
        $(".button9-div").animate({
            left: '1rem',
            height: '+=1rem',
            width: '+=1rem'
        });
    });
    /**
     *功能描述: 滑动收放模块
     *@author ZYH
     *@since 2021/7/2 9:54
     */
    $(".button10").click(function () {
        $(".button10-div").animate({
            height: 'toggle'
        });
    });
    /**
     *功能描述: 同时操作多个元素
     *@author ZYH
     *@since 2021/7/2 9:59
     */
    $(".button11").click(function () {
        var div = $(".button11-div");
        //拉长
        div.animate({
            height: '3rem', opacity: '0.4'
        }, "slow");
        //变宽
        div.animate({
            width: '3rem', opacity: '0.8'
        }, "slow");
        //变矮
        div.animate({
            height: '1rem', opacity: '0.4'
        }, "slow");
        //变窄
        div.animate({
            width: '1rem', opacity: '0.8'
        }, "slow");
    });
    $(".button12").click(function () {
        var button12_div = $(".button12-div")
        button12_div.animate({
            width: '3rem', height: '3rem'
        }, "slow")
        button12_div.animate({
            fontSize: "2rem"
        }, "slow");
    });
    /**
     *功能描述:
     *@author ZYH
     *@since 2021/7/2 10:31
     */
    $("#start").click(function () {
        $(".button-stop").animate({left: '5rem'}, 5000).css("color", "red");
        $(".button-stop").animate({fontSize: '4em'}, 5000);
    });

    $("#stop").click(function () {
        $(".button-stop").stop();
    });

    $("#stop2").click(function () {
        $(".button-stop").stop(true);
    });

    $("#stop3").click(function () {
        $(".button-stop").stop(true, true);
    });
    /**
     *功能描述: 点击按钮显示设置DOM对象
     *@author ZYH
     *@since 2021/7/2 11:09
     */
    $("#btn1").click(function () {
        alert("Text: " + $("#test2").text("text"));
    });
    $("#btn2").click(function () {
        alert("HTML: " + $("#test2").html("html"));
    });
    /**
     *功能描述:显示设置DOM对象的值
     *@author ZYH
     *@since 2021/7/2 11:12
     */
    $(".button13").click(function () {
        alert("您输入的内容: " + $("#test3").val("val"));
        $("#runoob").attr({
            "href": "http://www.runoob.com/jquery",
            "title": "jQuery 教程"
        });
        // 通过修改的 title 值来修改链接名称
        title = $("#runoob").attr('title');
        $("#runoob").html(title);
    });

    /**
     *功能描述:尾部添加元素
     *@author ZYH
     *@since 2021/7/2 11:15
     */
    $("#btn3").click(function () {
        $("ol").append("<li>追加列表项</li>");
    });
    $("#btn5").click(function () {
        $(".charuText").before("<b>之前</b>");
    });

    /**
     *功能描述: 头部添加元素
     *@author ZYH
     *@since 2021/7/2 11:35
     */
    $("#btn4").click(function () {
        $("ol").prepend("<li>在开头添加列表项</li>");
    });
    $("#btn6").click(function () {
        $(".charuText").after("<i>之后</i>");
    });

    /**
     *功能描述: 删除元素
     *@author ZYH
     *@since 2021/7/2 11:33
     */
    $(".button14").click(function () {
        $(".italic").remove();
    });
    $(".button15").click(function () {
        $(".button15-div").empty();
    });

    /**
     *功能描述:为选中的元素添加css
     *@author ZYH
     *@since 2021/7/2 11:55
     *
     *addClass为添加样式
     *removeClass为删除样式
     * toggleClass为互相切换样式
     */
    $("#button16").click(function () {
        $("#button16-div").addClass("cssButton16-div");
    });

});
